<template>
    <el-button type="primary" @click="addUserDialogVisible = true">添加用户</el-button>
    <el-table :data="userList" border stripe>
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column fixed="right" label="操作">
            <template #default="{ row }">
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteUserHandle(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <el-pagination layout="prev, pager, next, total" :page-size="page.size" :total="page.total"
            @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </div>


    <el-dialog v-model="addUserDialogVisible" width="60%">
        <template #header>
            <span> 添加用户</span>
        </template>
        <el-form :model="addUserForm" label-width="120px">
            <el-form-item label="username" prop="username">
                <el-input v-model.number="addUserForm.username" />
            </el-form-item>
            <el-form-item label="Password" prop="pass">
                <el-input v-model="addUserForm.password" type="password" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button @click="addUserDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addUserReq">确认</el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog title="编辑用户" v-model="editDialogVisible" width="30%">
        <el-form :model="updateUserFrom" label-width="100px">
            <el-form-item label="用户名">
                <el-input v-model="updateUserFrom.username"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updateUserHandle">保存</el-button>
        </div>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { getUserList, addUser, deleteUser, updateUser } from '@/api/user'
import { ref } from 'vue'

const page = ref({
    page: 1,
    size: 20,
    total: 0
})

const userList = ref<UserInfo[]>([])
const updateUserFrom = ref<UserUpdateRequest>({
    username: ""
})

const addUserDialogVisible = ref(false)
const editDialogVisible = ref(false)

const addUserForm = ref<UserAddRequest>({
    username: '',
    password: ''
})

const getUserTable = () => {
    getUserList(page.value.page, page.value.size).then(res => {
        page.value.total = res.total == undefined ? 0 : res.total
        userList.value = res.data == undefined ? new Array() : res.data
    })
}
getUserTable()

const addUserReq = async () => {
    await addUser(addUserForm.value)
    getUserTable()
    addUserDialogVisible.value = false
}


const handleSizeChange = (val: number) => {
    page.value.size = val
    getUserTable()
}

const handleCurrentChange = (val: number) => {
    page.value.page = val
    getUserTable()
}

const deleteUserHandle = async (row: any) => {
    await deleteUser(row.id)
    userList.value = userList.value.filter((v) => {
        return v.id != row.id
    })
}

const updateUserHandle = async () => {
    updateUser(updateUserFrom.value)
    getUserTable()
}
</script>

<style lang="less" scoped></style>